<template>
    <div id="app" ref="app">
        <!-- 头部的独立组件 -->
        <transition enter-active-class="animated bounceInDown" leave-active-class="animated bounceOutUp">
            <TopBar v-show="!$route.meta.hideTop"></TopBar>
        </transition>
        <!-- 页面切换的路由占位 -->
        <keep-alive exclude="detail,cart">
            <transition enter-active-class="animated slideInRight" leave-active-class="animated slideOutLeft">
                <router-view></router-view>
            </transition>
        </keep-alive>
        <!-- 底部的独立组件 -->
        <transition enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown">
            <BottomBar v-show="!$route.meta.hideBottom"></BottomBar>
        </transition>
        <FiexdMenus v-show="$route.meta.showMenu"></FiexdMenus>
    </div>
</template>
<script>
import TopBar from "./components/TopBar.vue";
import BottomBar from "./components/BottomBar.vue";
import FiexdMenus from "./components/FiexdMenus.vue";
import { mapActions } from "vuex";

export default {
    components: {
        TopBar,
        BottomBar,
        FiexdMenus
    },
    methods: {
        // 项目运行时，初始化购物车
        ...mapActions(["loadCartList"])
    },
    mounted() {
        // 判断是否为移动设备，如果不是 设置最大宽度
        if (
            !/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(
                navigator.userAgent
            )
        ) {
            this.$refs.app.style.width = "10rem";
            this.$refs.app.style.marginLeft = "50%";
            this.$refs.app.style.left = "-25%";
        }
        this.loadCartList();
    }
};
</script>

<style lang="less">
* {
    margin: 0px;
}
// #app{
//   color: @pink;
//   font-size: 40px;
//   // 当单位为大写时 转换会直接失效
//   border: 1PX solid #cccccc;
// }
// swiper 样式重写
body {
    overflow: hidden;
    background-color: @gray;
    margin: 0 auto;
}
#app{
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    background-color: white;
}
.swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    background: #ffffff;
    opacity: 0.6;
}
.swiper-pagination-bullet-active {
    opacity: 1;
    background: @pink;
}
</style>
